<template>
  <el-container>
    <el-header>
      <el-row>
        <el-col :span="5">
          <el-input size="mini" v-model="input" placeholder="请输入疾病分类编码或名称"></el-input>
        </el-col>
        <el-col :span="4">
          <el-button size="mini" type="primary" icon="el-icon-search" @click="queryDiseCategory()">查询疾病分类</el-button>
        </el-col>
        <el-col :span="6">
          <el-button size="mini" type="primary" icon="el-icon-edit" @click="dialogVisible = true">新增疾病分类</el-button>
        </el-col>
        <el-dialog title="新增疾病分类" :visible.sync="dialogVisible" width="40%">
          <el-form :model="addDiseCategoryForm">
            <el-form-item label="疾病分类编码" >
              <el-input v-model="addDiseCategoryForm.dicaCode"></el-input>
            </el-form-item>
            <el-form-item label="疾病分类名称" >
              <el-input v-model="addDiseCategoryForm.dicaName"></el-input>
            </el-form-item>
            <el-form-item label="显示顺序号" >
              <el-input v-model="addDiseCategoryForm.sequenceNo"></el-input>
            </el-form-item>
            <el-form-item label="疾病类型" >
              <el-select v-model="addDiseCategoryForm.dicaType" placeholder="请选择疾病类型" >
                <el-option label="西医" value="1"></el-option>
                <el-option label="中医" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="疾病类型代号" >
              <el-input v-model="addDiseCategoryForm.dicaType" ></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addNewDiseCategory()">保 存</el-button>
          </span>
        </el-dialog>

        <el-col :span="9">
          <el-button size="mini" type="primary" icon="el-icon-menu">疾病管理</el-button>
        </el-col>
      </el-row>
    </el-header>
   <el-main>
      <!-- 查询全部疾病分类 -->
      <el-table :data="diseDategoryTable" style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="sequenceNo" label="显示顺序号" width="180"></el-table-column>
        <el-table-column prop="dicaCode" label="分类编码" width="180"></el-table-column>
        <el-table-column prop="dicaName" label="分类名称" width="180"> </el-table-column>
        <el-table-column prop="dicaType" label="疾病类型" width="180"> </el-table-column>
        <!-- 每行添加操作按钮 -->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="updateDiseCategory(scope.$index,scope.row)">编辑</el-button>

            <el-dialog title="修改疾病分类" :visible.sync="dialogVisible" center>
              <el-form :model="updateDiseCateForm" label-width="80px">
                <el-form-item label="疾病分类编码" >
                  <el-input v-model="updateDiseCateForm.dicaCode" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="疾病分类名称" >
                  <el-input v-model="updateDiseCateForm.dicaName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="疾病类型" >
                  <el-input v-model="updateDiseCateForm.dicaType" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="显示顺序号" >
                  <el-input v-model="updateDiseCateForm.sequenceNo" autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
              </div>
            </el-dialog>
            <el-button size="mini" type="danger" >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="totalNumber"
        :hide-on-single-page="pageShow"
        @current-change="pageChange"> <!-- 不加括号，方法中加入事件的回调参数 -->
      </el-pagination>
    </el-main>
  </el-container>
</template>

<script>
  import {postRequest} from '../../utils/ajaxapi'
  import {getRequest} from '../../utils/ajaxapi'
  export default {
    mounted:function(){
      this.getDiseCategory(1,10,'');
    },
    data(){
      return {
        input:'', //输入查询框内容
        dialogVisible: false, //新增疾病分类按钮弹出框开关
        pageShow: true,
        totalNumber:1000,
        addDiseCategoryForm:{ //新增疾病分类输入
          dicaCode:'',
          dicaName:'',
          sequenceNo:'',
          dicaType:''
        },
        updateDiseCateForm:{  //修改疾病分类
          dicaCode:'',
          dicaName:'',
          sequenceNo:'',
          dicaType:''
        },
        diseDategoryTable:[{
          dicaCode:'',
          dicaName:'',
          sequenceNo:'',
          dicaType:''
        }], //查询全部疾病分类
      }
    },
    methods:{
      //得到疾病分类
      getDiseCategory(pageNumber,pageSize,dicaName){
        let _this = this;
        getRequest("/neusys/dise/getDiseCategory?pageNumber="+pageNumber+
        "&pageSize="+pageSize+
        "&dicaName="+dicaName)
        .then(function (response){
          //vue中给表格绑定变量赋值，相当于表格显示数据，可应用于(查询-->显示)
          _this.diseDategoryTable = response.data;
          _this.totalNumber = response.data.pageNumber;
        })
      },
      //根据输入内容查询疾病分类
      queryDiseCategory(){
        if(this.input == null){
          this.input = '';
        }
        this.getDiseCategory(1,10,this.input);
      },
      //页码改变时调用，得到当前页码
      pageChange(pageNum){
        if(this.input == null){
          this.input = '';
        }
        this.getDrugs(pageNum,10,this.input);
      },
      //添加疾病分类
      addNewDiseCategory(){
        this.dialogVisible = false;
        postRequest("/neusys/dise/addDiseCategory",this.addDiseCategoryForm)
      },


    }

  }

</script>

<style>
</style>
